<template>
	<view>
		
		<scroll-view id="scroll" scroll-y="true"
		 :scroll-top="scrolltop" 
		 :scroll-with-animation="true"
		  :style="{height:style.contenH+'px'}"
		  >
			<u-toast ref="uToast" />
				<!-- 帖子内容 -->
			<detaill-info @guanzhu="guanzhu" @ding="ding" :item="detailldata"></detaill-info>
				<!-- 评论 -->
				
				<view class="detaill-talk-body">
					<view class="detaill-talk-title">最新评论 {{comment.count}}</view>
					<block v-for="(item,index) in comment.list" :key="index">
					<talk-list :item="item" ></talk-list>
					</block>
				</view>
			
		</scroll-view>
		
			<!-- 输入框 -->
			<chat-input @submit="submit"></chat-input>
			<!-- 分享 -->
			<u-mask z-index="99" :show="shareshow" @tap="shareshow = false"></u-mask>
			<share-list :shareshow="shareshow" ></share-list>
			
		
	</view>		
</template>

<script>
	import detaillInfo from '../../components/detaill/detaill-info.vue'
	import time from '../../common/time.js'
	import chatInput from '../../components/chat/chat-input.vue'
	import talkList from '../../components/common/talk-list.vue'
	import shareList from '../../components/common/share-list.vue'
	export default {
		data() {
			return {
				detailldata:'',
				shareshow:false,
				scrolltop:0,//高度
			
				style:{
					contenH:0,
					itemH:0
				},
				comment:{
					
					count:0,
					list:[]
				}
			}
		},
		components:{
			detaillInfo,
			talkList,
			chatInput,
			shareList
		},
		//初始化数据
		onLoad(e) {
			//this.detailldata=JSON.parse(e.detaill)
			this.initdetaill()
			this.inittalk()
			this.init()
			
		},
	
		
		//监视菜单按钮点击
		onNavigationBarButtonTap(e){
		
			switch (e.index){
				case 1:
			
					break;
				case 0:
				
			
				this.share()
					break;	
				default:
					break;
			}
		},
		methods: {
			
			//分享
			share(){
				this.shareshow=true
			},
			//发送评论
			submit(e){
				let obj={
					id:1,
					faid:0,
					data:e,
					time:time.gettime.gettime(new Date().getTime()),
					username:'蔡徐坤',
					userimg:'../../static/demo/datapic/10.jpg'
				}
				this.comment.list.push(obj)
				this.onsubmit()
			},
			//初始化帖子数据
			initdetaill(){
				this.detailldata={
					
						//图片样式
						username:'我是昵称',
						userurl:'../../static/demo/datapic/10.jpg',
						userage:20,
						usersex:'女',
						isguanzhu:true,
						title:'我是图片',
						imgsrc:'../../static/demo/datapic/12.jpg',
						imgs:['../../static/demo/datapic/12.jpg'],
						video:false,
						share:false,
						isimg:true,
						address:'深圳 龙岗',
						sharenum:22,
						talk:21,
						ding:22,
						isding:false,
						time:'十天前'
					
				}
			},
			//初始化评论
			inittalk(){
				let obj=[
						{
							id:1,
							faid:0,
							data:'你是真的菜！',
							time:time.gettime.gettime(new Date().getTime()),
							username:'蔡徐坤',
							userimg:'../../static/demo/datapic/10.jpg'
						},
						{
									id:2,
									faid:1,
									data:'你说谁呢？',
									time:time.gettime.gettime(new Date().getTime()),
									username:'肖战',
									userimg:'../../static/demo/datapic/10.jpg'
								},
								{
											id:4,
											faid:1,
											data:'cnm！！',
											time:time.gettime.gettime(new Date().getTime()),
											username:'蔡徐坤',
											userimg:'../../static/demo/datapic/10.jpg'
										},
							{
										id:3,
										faid:0,
										data:'肖战糊了！！！',
										time:time.gettime.gettime(new Date().getTime()),
										username:'蔡徐坤',
										userimg:'../../static/demo/datapic/10.jpg'
									}
						]
						this.comment.list=obj
			},
			//关注x
			guanzhu(){
				
				//取消关注
				if(this.detailldata.isguanzhu){
					this.$refs.uToast.show({
						title: '取消关注成功',
						type: 'success',
						position:'top'
					})
				}else{
					this.$refs.uToast.show({
						title: '关注成功',
						type: 'success',
						position:'top'
					})
				}
				this.detailldata.isguanzhu=!this.detailldata.isguanzhu
				console.log("我点了顶踩")
			},
			
			init(){
			
				try {
				    const res = uni.getSystemInfoSync();
					this.style.contenH=res.windowHeight-uni.upx2px(120)
				    console.log(res.windowHeight);
				
				}catch (e){
					
				}
			},
			//提交时执行方法
			onsubmit(){
				let q = uni.createSelectorQuery();
				q.select("#scroll").boundingClientRect()
				q.selectAll(".chat-body").boundingClientRect()
				q.exec((res)=>{
					for (var i = 0; i < res[1].length; i++) {
						
						this.style.itemH+=res[1][i].height
					}
					if(this.style.itemH>this.style.contenH){
						this.scrolltop=this.style.itemH
					}
				})
				console.log(this.style.itemH)
				console.log(this.scrolltop)
			},
			//顶
			ding(){
				
				
				if(this.detailldata.isding){
					this.detailldata.ding--;
				}else{
					this.detailldata.ding++;
				}
				this.detailldata.isding=!this.detailldata.isding
			}
		}
	}
</script>

<style>
	.detaill-talk-title{
		font-size: 35upx;
		padding: 10upx 20upx;
		font-weight: bold;
	}
	.detaill-talk-body{
		padding: 20upx 20upx;
	}
	
</style>
